import React, { useState, useEffect, useRef } from 'react';
import Taro from '@tarojs/taro';
import { connect } from 'react-redux';
import { View, Button, Text, Input } from '@tarojs/components';
import utils from '@/utils/index';

import './index.scss';

const LoginMobile = ({ dispatch, sendResult, setLoginPage, loginPage }) => {
  const [val, setVal] = useState({});

  const [getCodeText, setGetCodeText] = useState('发送验证码');
  const cutDownTime = useRef(60); //60s
  const lock = useRef(false);

  const inputHandler = (key, e) => {
    setVal({ ...val, [key]: e.detail.value });
  };

  const getCode = () => {
    if (lock.current) {
      return;
    }
    if (getCodeText != '发送验证码') {
      return;
    }
    if (!utils.filterTel(val.mobile)) {
      Taro.showToast({
        title: '请填写正确的手机号',
        icon: 'none',
      });
      return;
    }
    lock.current = true;

    dispatch({
      type: 'login/getCode',
      payload: {
        recv: val.mobile,
        verifyValue: '11111',
      },
    });
  };

  useEffect(() => {
    if (sendResult) {
      Taro.showToast({
        title: '发送成功',
      });
      dispatch({
        type: 'login/codeSend',
        payload: false,
      });
      let timer = setInterval(function () {
        cutDownTime.current--;
        if (cutDownTime.current <= 0) {
          clearInterval(timer);
          setGetCodeText('发送验证码');
          cutDownTime.current = 60;
          lock.current = false;
          return;
        }
        setGetCodeText(`重新发送(${cutDownTime.current}s)`);
      }, 1000);
    }
  }, [sendResult]);

  const loginByMobile = () => {
    if (!utils.filterTel(val.mobile)) {
      Taro.showToast({
        title: '请填写正确的手机号',
        icon: 'none',
      });
      return;
    }
    if (!utils.trim(val.code)) {
      Taro.showToast({
        title: '请填写验证码',
        icon: 'none',
      });
      return;
    }

    dispatch({
      type: 'login/login',
      payload: {
        username: val.mobile,
        password: val.code,
        loginType: 'USER_MOBILE',
      },
    });
  };

  return (
    <View>
      <View className="login-form">
        <View className="input-view">
          <Input
            className="l-input"
            type="number"
            value={val.mobile}
            placeholder="请输入您的手机号"
            placeholderStyle="color:rgba(0,0,0,.25)"
            onInput={(e) => {
              inputHandler('mobile', e);
            }}
          />
        </View>
        <View className="input-view">
          <Input
            className="l-input"
            type="number"
            value={val.code}
            placeholder="请输入验证码"
            placeholderStyle="color:rgba(0,0,0,.25)"
            onInput={(e) => {
              inputHandler('code', e);
            }}
          />
          <Text
            className={`getCode ${getCodeText == '发送验证码' ? '' : 'getting'}`}
            onClick={getCode}
          >
            {getCodeText}
          </Text>
        </View>
      </View>
      <View className="btn-view">
        <Button
          className={`btn-blue ${val.mobile && val.code ? '' : 'disabled'}`}
          onClick={loginByMobile}
        >
          登录
        </Button>
      </View>
      <View className="moreWay">
        <View className="text" onClick={() => setLoginPage(loginPage.WECHAT)}>
          更多登录方式
        </View>
      </View>
    </View>
  );
};
export default connect(({ login }) => ({
  // ...login,
  sendResult: login.sendResult,
}))(LoginMobile);
